<template>
    <div>
        <group>
            <x-input title="真实姓名" v-model="forms.name" type="text" name="name" novalidate :icon-type="iconType.name"
                     placeholder="真实姓名"></x-input>
            <x-input title="手机号码" v-model="forms.mobile" name="mobile" novalidate :icon-type="iconType.mobile"
                     placeholder="请输入手机号码" type="tel"
                     is-type="china-mobile"></x-input>
            <x-input title="用户密码" type="password" placeholder="登录密码" novalidate :icon-type="iconType.password"
                     name="forms.password" v-model="forms.password" :min="6"
                     :max="12" @on-change="change"></x-input>
            <x-input title="确认密码" v-model="forms.password_confirmation" novalidate
                     :icon-type="iconType.password_confirmation" type="password" placeholder="确认密码"
                     :equal-with="forms.password"></x-input>
            <x-input title="QQ邮箱" v-model="forms.email" name="email" novalidate :icon-type="iconType.email"
                     placeholder="请输入QQ邮箱" type="email"></x-input>
        </group>
        <div style="padding:15px;">
            <x-button @click.native="doPost" type="primary">注册</x-button>
        </div>
        <div v-transfer-dom>
            <actionsheet :menus="menus" v-model="showMenus" show-cancel></actionsheet>
        </div>
    </div>
</template>

<script>

    import Vue from 'vue'
    import {ToastPlugin, Toast, XHeader, Actionsheet, TransferDom, Group, XInput, ButtonTab, XButton} from 'vux'
    Vue.use(ToastPlugin)

    export default {
        directives: {
            TransferDom
        },
        components: {
            Toast,
            XHeader,
            Actionsheet,
            ButtonTab,
            XButton,
            Group,
            XInput
        },
        data () {
            return {
                menus: {
                    menu1: 'Take Photo',
                    menu2: 'Choose from photos'
                },
                showMenus: false,
                showMore: true,
                forms: {
                    name: 'iceqi',
                    mobile: '17600955560',
                    email: '95857548@qq.com',
                    password: '7899121',
                    password_confirmation: '7899121'
                },
                iconType: {
                    name: '',
                    mobile: '',
                    email: '',
                    password: '',
                    password_confirmation: '',
                }
            }
        },
        methods: {
            change (val) {
                console.log(val)
            },
            doPost() {
                const that = this;

                axios.post('/api/register', this.forms).then(function (res) {
                    that.$vux.toast.show({
                        text: '注册成功',
                        time: 1000,
                        type: 'success'
                    })
                    this.$router.push({path: '/home'})
                }).catch(function (error) {
                    if (error.response) {
                        for (let e_row in error.response.data) {
                            that.iconType[e_row] = 'error'
                        }
                        that.$vux.toast.show({
                            text: '注册失败,请检查',
                            time: 3000,
                            type: 'error'
                        })
                    }
                });
            },
        }

    }
</script>